<template>
  <BreadcrumbBar
    parent-label="AI Service Management"
    child-label="Ai Account Book"
  ></BreadcrumbBar>

  <div class="container">
    <el-input
      v-model="textarea"
      style="width: 240px"
      :rows="2"
      type="textarea"
      placeholder="Please input"
    />

    <el-button
      style="height: 100%"
      v-once-click
      color="#626aef"
      plain
      :icon="Search"
      @click="clickHandler"
    >
      条件查询
    </el-button>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
// import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

import BreadcrumbBar from '@/components/BreadcrumbBar/BreadcrumbBar.vue'

const textarea = ref('')

// 配置项
const instance = axios.create({
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions',
  timeout: 15000,
})

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    config.headers.Authorization = 'Bearer '

    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.data
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

const clickHandler = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const dateString = `${year}-${month}-${day}`

  const messages = [
    {
      role: 'user',
      content: `
      # 任务
      你是一个智能记账管家，请根据我的文本描述，提取出文本中的相关账本信息，并按照相应格式返回信息。
      # 格式说明
      time: 按照当前的北京时间${dateString}，根据文本描述提取出时间，格式为yyyy-mm-dd hh:mm:ss；amount: 金额，单位为元；type: 类型，{1：饮食，2：交通，3：日用百货，4：娱乐，5：通讯，6：其他}；description: 商品描述
      返回一个json数组，包含账本信息，格式如下：
      [
        {
          "time": "2023-10-01 10:00:00",
          "amount": 100,
          "type": 1,
          "description": "描述"
        },
        {
          "time": "2023-10-01 11:00:00",
          "amount": 200,
          "type": 2,
          "description": "描述"
        }
      ]
      # 描述
      ${textarea.value}
     `,
    },
  ]

  const obj = {
    model: 'qwen3-max',
    messages: messages,
  }

  instance.post('', obj).then((res: any) => {
    console.log(res)
  })
}
</script>

<style lang="less" scoped>
.container {
  padding: 10px;
}
</style>
